<template>
	<view class="classify">
		<view class="top">
			<view class="Vinput" @click="clickVinput">
				<text>请输入内容查找</text>
			</view>
			<!-- button组件 -->
			<classifyToplist :top_list="top_list"></classifyToplist>
			<!-- /button组件 -->
		</view>
		<view class="bottom">
			<view class="left ">
				<view :class="{'left-list': true, 'v-left-list': v_left_list === item.id}" v-for="(item, index) in left_list" :key="item.id" @click="updateLeftListCss(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="right">
				<classofylist :shuzi="shuzi"></classofylist>
			</view>
		</view>
		
	</view>
</template>

<script>
	import classofylist from '../../components/classifyList/classifyList.vue'
	import classifyToplist from '../../components/classifyToplist/classifyToplist.vue'
	export default {
		data() {
			return {
				left_list: [
					{
						name: '共享汽车',
						id: 0
					},
					{
						name: '共享房屋',
						id: 1
					},
					{
						name: '共享数码',
						id: 2
					},
					{
						name: '共享服装',
						id: 3
					},
					{
						name: '共享玩具',
						id: 4
					},
					{
						name: '共享乐器',
						id: 5
					}
				],
				top_list1: [
					{
						id: 1,
						name: '鼠标键盘'
					},
					{
						id: 2,
						name: '笔记本电脑'
					},
					{
						id: 3,
						name: '平板电脑'
					},
					{
						id: 4,
						name: '显示器'
					},
					{
						id: 5,
						name: '无线鼠标'
					},
					{
						id: 6,
						name: '键盘'
					},
					{
						id: 7,
						name: '蓝牙耳机'
					},
					{
						id: 8,
						name: '耳机耳麦'
					},
					{
						id: 9,
						name: '无屏投影'
					},
					{
						id: 10,
						name: '散热器'
					},
					{
						id: 11,
						name: 'VR'
					},
					{
						id: 12,
						name: '音响'
					}
				],
				v_left_list: 0,
				shuzi: 5,
				top_list: [
					{
						id: 1,
						name: '鼠标键盘'
					},
					{
						id: 2,
						name: '笔记本电脑'
					},
					{
						id: 3,
						name: '平板电脑'
					},
					{
						id: 4,
						name: '显示器'
					},
					{
						id: 5,
						name: '无线鼠标'
					},
					{
						id: 6,
						name: '键盘'
					},
					{
						id: 7,
						name: '蓝牙耳机'
					},
					{
						id: 8,
						name: '耳机耳麦'
					},
					{
						id: 9,
						name: '无屏投影'
					},
					{
						id: 10,
						name: '散热器'
					},
					{
						id: 11,
						name: 'VR'
					},
					{
						id: 12,
						name: '音响'
					}
				],
				top_list2: [
					{
						id: 1,
						name: '共享房屋'
					},
					{
						id: 2,
						name: '共享房屋'
					},
					{
						id: 3,
						name: '共享房屋'
					},
					{
						id: 4,
						name: '共享房屋'
					},
					{
						id: 5,
						name: '共享房屋'
					},
					{
						id: 6,
						name: '共享房屋'
					},
					{
						id: 7,
						name: '共享房屋'
					},
					{
						id: 8,
						name: '共享房屋'
					},
					{
						id: 9,
						name: '共享房屋'
					},
					{
						id: 10,
						name: '共享房屋'
					},
					{
						id: 11,
						name: '共享房屋'
					},
					{
						id: 12,
						name: '共享房屋'
					}
				],
				top_list3: [
					{
						id: 1,
						name: '共享数码'
					},
					{
						id: 2,
						name: '共享数码'
					},
					{
						id: 3,
						name: '共享数码'
					},
					{
						id: 4,
						name: '共享数码'
					},
					{
						id: 5,
						name: '共享数码'
					},
					{
						id: 6,
						name: '共享数码'
					},
					{
						id: 7,
						name: '共享数码'
					},
					{
						id: 8,
						name: '共享数码'
					},
					{
						id: 9,
						name: '共享数码'
					},
					{
						id: 10,
						name: '共享数码'
					},
					{
						id: 11,
						name: '共享数码'
					},
					{
						id: 12,
						name: '共享数码'
					}
				],
				top_list4: [
					{
						id: 1,
						name: '共享服装'
					},
					{
						id: 2,
						name: '共享服装'
					},
					{
						id: 3,
						name: '共享服装'
					},
					{
						id: 4,
						name: '共享服装'
					},
					{
						id: 5,
						name: '共享服装'
					},
					{
						id: 6,
						name: '共享服装'
					},
					{
						id: 7,
						name: '共享服装'
					},
					{
						id: 8,
						name: '共享服装'
					},
					{
						id: 9,
						name: '共享服装'
					},
					{
						id: 10,
						name: '共享服装'
					},
					{
						id: 11,
						name: '共享服装'
					},
					{
						id: 12,
						name: '共享服装'
					}
				],
				top_list5: [
					{
						id: 1,
						name: '共享玩具'
					},
					{
						id: 2,
						name: '共享玩具'
					},
					{
						id: 3,
						name: '共享玩具'
					},
					{
						id: 4,
						name: '共享玩具'
					},
					{
						id: 5,
						name: '共享玩具'
					},
					{
						id: 6,
						name: '共享玩具'
					},
					{
						id: 7,
						name: '蓝牙耳机'
					},
					{
						id: 8,
						name: '共享玩具'
					},
					{
						id: 9,
						name: '共享玩具'
					},
					{
						id: 10,
						name: '共享玩具'
					},
					{
						id: 11,
						name: '共享玩具'
					},
					{
						id: 12,
						name: '共享玩具'
					}
				],
				top_list6: [
					{
						id: 1,
						name: '共享乐器'
					},
					{
						id: 2,
						name: '共享乐器'
					},
					{
						id: 3,
						name: '共享乐器'
					},
					{
						id: 4,
						name: '共享乐器'
					},
					{
						id: 5,
						name: '共享乐器'
					},
					{
						id: 6,
						name: '共享乐器'
					},
					{
						id: 7,
						name: '共享乐器'
					},
					{
						id: 8,
						name: '共享乐器'
					},
					{
						id: 9,
						name: '共享乐器'
					},
					{
						id: 10,
						name: '共享乐器'
					},
					{
						id: 11,
						name: '共享乐器'
					},
					{
						id: 12,
						name: '共享乐器'
					}
				],
			
			};
		},
		components: {
			classofylist,
			classifyToplist
		},
		methods: {
			updateLeftListCss (index) {
				this.v_left_list = index
				this.shuzi = index + 5
				
				
				switch (index) {
					case 0:
						this.top_list = this.top_list1
						break;
					case 1:
						this.top_list = this.top_list2
						break;
					case 2:
						this.top_list = this.top_list3
						break;
					case 3:
						this.top_list = this.top_list4
						break;
					case 4:
						this.top_list = this.top_list5
						break;
					case 5:
						this.top_list = this.top_list6
						break;
				}
			},
			clickVinput () {
				uni.switchTab({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.classify{
	box-sizing: border-box;
	background-color: #4d6bed;
}

.top {
	height: 470rpx;
	padding:10rpx 20rpx 0;
	color: #a5a5a5;
	font-size: 20rpx;
	font-weight: 500;
	.Vinput {
		height: 65rpx;
		border-radius: 50rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
}

.bottom{
	display: flex;
	background-color: #f5f5f5;
	padding: 30rpx 0 0;
	// height: 5000px;
	.left {
		width: 187rpx;
		.left-list{
			border-radius: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 18rpx 15rpx;
			font-size: 27rpx;
			color: #6f6f6f;
		}
	}
}


.v-left-list {
	background-color: #8ed5cd !important;
}
</style>
